 <template>
   <el-card shadow="always" class="box-card">
      <div class="card-name search-item">
        <div class="name width2">客户列表</div>
        <div class="mr-15">
          <el-button size="medium" type="primary" @click="add">新 增</el-button>
          <el-button size="medium" type="danger">导入</el-button>
          <el-button size="medium" type="danger">导出</el-button>
          <el-button size="medium" type="danger" @click="handleRemove()">批量删除</el-button>
        </div>
      </div>
      <div class="content-con">
        <el-form :model="form" ref="form" size="medium" class="flex-s">
          <el-form-item prop="client_value" class="mr-15">
            <el-select v-model="form.client_value" placeholder="选择客户类别" style="width: 100%;">
              <el-option
              v-for="item in clientList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="keywords" class="mr-15">
            <el-input v-model="form.keywords" placeholder="输入编号/名称/联系人/电话查询"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="save" @click="search">查 询</el-button>
          </el-form-item>
        </el-form>
        <div class="form-item">
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            class="table"
            stripe border
            ref="multipleTable"
            @selection-change="selsChange"
            :header-cell-style="{background:'#f3f3f3',textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"><!--:data="用于存放请求数据回来的数组" -->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="client_type" label="客户类别" width="120">
            </el-table-column>
            <el-table-column prop="client_no" label="客户编号" width="140">
            </el-table-column>
            <el-table-column prop="client" label="客户名称" width="100">
            </el-table-column>
            <el-table-column prop="is_agent" label="是否为代理" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_agent == 0" type="success">是</el-tag>
                <el-tag v-if="scope.row.is_agent == 1" type="warning">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="is_store" label="是否有门店" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_store == 0" type="success">是</el-tag>
                <el-tag v-if="scope.row.is_store == 1" type="warning">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="uper" label="所属上级" width="100">
            </el-table-column>
            <el-table-column prop="lower" label="所属下级" width="100">
            </el-table-column>
            <el-table-column prop="contact" label="联系人" width="100">
            </el-table-column>
            <el-table-column prop="phone" label="手机" width="140">
            </el-table-column>
            <el-table-column prop="position" label="职位" width="120">
            </el-table-column>
            <el-table-column prop="start_balance" label="期初往来余额" width="120">
            </el-table-column>
            <el-table-column prop="address" label="送货地址" width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0" type="success">已启用</el-tag>
                <el-tag v-else type="warning">已禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope.row)">
                  <i class="el-icon-edit"></i>编辑
                </el-button>
                <el-button type="text" @click.native.prevent="deleteRow(scope.$index,tableData)">
                  <i class="el-icon-delete"></i>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页-页码 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </div>
      <client-edit ref="ClientEdit" :rows="rows"></client-edit>
      <client-add ref="ClientAdd"></client-add>
   </el-card>

 </template>
<script>
import ClientEdit from '@/components/client-manage/ClientEdit';
import ClientAdd from '@/components/client-manage/ClientAdd';
export default {
  components:{
    ClientEdit,
    ClientAdd
  },
  data () {
    return {
      rows: '',//表格一行的数据
      sels: [],
      currentPage: 1, //当前页码
      pagesize: 5,    //每页的数据条数
      //tableData: [] //表格数据
      tableData: [
        {
          client_type: '代理商',
          client_no: '1101',
          client: '小花',
          contact: '小笑话',
          is_agent: 0,
          is_store: 1,
          uper: '--',
          lower: '小树',
          phone: '15552326587',
          position: '',
          start_balance: '8500.00', //期初往来余额
          status: 0,
          address: '河北省石家庄市桥东区Tommy',
          first_contact: '',
          client_value: '0',
          client_level: '',
          start_shoupay: '',//期初应收款
          start_prepay: '' ,//期初预收款
          balance_date: '2021-03-16',
        },
        {
          client_type: '客户类2',
          client_no: '1103',
          client: '小草',
          contact: '小小草',
          is_agent: 1,
          is_store: 1,
          uper: '--',
          lower: '--',
          phone: '',
          position: '',
          start_balance: '8500.00', //期初往来余额
          status: 0,
          address: '',
          first_contact: '',

          client_value: '2',
          client_level: '',
          start_shoupay: '',//期初应收款
          start_prepay: '' ,//期初预收款
          balance_date: '2021-03-16',
        },
        {
          client_type: '门店',
          client_no: '1104',
          client: '小树',
          contact: '小小酥',
          is_agent: 1,
          is_store: 0,
          uper: '小花',
          lower: '--',
          phone: '44444222222',
          position: '',
          start_balance: '8500.00', //期初往来余额
          status: 0,
          address: '',
          first_contact: '',

          client_value: '2',
          client_level: '',
          start_shoupay: '',//期初应收款
          start_prepay: '' ,//期初预收款
          balance_date: '2021-03-16',
        }
      ],
      form: {
        client_value: '',
        keywords: ''
      },
      clientList: [
        {value: '0',label: '代理商'},
        {value: '1',label: '客户类2'},
        {value: '2',label: '门店'}
      ]
    }
  },

  methods: {
    // 查询
    search () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(this.form)
          this.$message.success('保存成功')
        } else {
          this.$message.error('表单验证失败!')
        }
      })
    },

    //编辑操作
    handleEdit(row) {
      // this.rows = row;
      this.rows = JSON.parse(JSON.stringify(row))
      this.$nextTick(()=>{
        this.$refs.ClientEdit.openClient();
      });
    },

    //新增
    add() {
      this.$nextTick(()=>{
        this.$refs.ClientAdd.addClient();
      });
    },

    //删除操作
    deleteRow(index, rows){
      this.$confirm('删除的供应商将不能恢复，请确认是否删除？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //选中数据
    selsChange(data) {
      this.sels = data;
    },

    // 批量清除
    handleRemove () {
      var that = this
      // 拿到选中的数据；
      var val = this.sels
      // 如果选中数据存在
      if (val) {
        // 将选中数据遍历
        val.forEach(function (item, index) {
          // 遍历源数据
          that.tableData.forEach(function (itemI, indexI) {
            // 如果选中数据跟元数据某一条标识相等，删除对应的源数据
            if (item.client_no === itemI.client_no) {
              that.tableData.splice(indexI, 1)
            }
          })
        })
      }
      // 清除选中状态
      this.$refs.multipleTable.clearSelection()
    },

    //每页条数改变时触发事件,选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pagesize = val;
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  }
}
</script>
<style>

</style>
